
<template>
    <div>
      <i-frame  v-model:src="fullUrl" v-if="showIFrame" frameborder="0" width="100%" height="100%"></i-frame>
    </div>
  </template>
  
  <script setup>import { ref, onMounted, computed, reactive } from 'vue';
  import iFrame from '@/components/iFrame';
  import { getUserProfile } from "@/api/system/user";
  
  const url = "http://192.168.110.11:8089";
  const showIFrame = ref(true);
  
  const state = reactive({
    user: {},
    roleGroup: {},
    postGroup: {}
  });
  
  function getUser() {
    getUserProfile().then(response => {
      state.user = response.data;
      state.roleGroup = response.roleGroup;
      state.postGroup = response.postGroup;
      console.log("User data:", state.user); // 调试信息
      openNewPage(); // 在获取到用户名后打开新页面
    }).catch(error => {
      console.error("Error fetching user profile:", error);
    });
  };
  
  getUser();
  
  // 计算属性，拼接 URL 和用户名
  const fullUrl = computed(() => {
    if (state.user.userName) {
      return `${url}?username=${state.user.nickName}&phone=${state.user.phonenumber}`;
    }
    return url;
  });
  
  function openNewPage() {
    window.open(fullUrl.value, '_blank');
  }
  
  onMounted(() => {
    // 确保在获取到用户名后再打开新页面
    // 如果需要立即打开新页面，可以在 getUser 的 then 回调中调用 openNewPage
  });
  </script>
 
 <style scoped>
 .iframe-container {
   width: 100%;
   height: 100vh; /* 设置高度为视口高度 */
   overflow: hidden; /* 防止滚动条出现 */
   position: relative;
 }
 
 .iframe-container iframe {
   width: 100%;
   height: 100%;
   border: none;
 }
 </style>